<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <!-- 避免IE使用兼容模式 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="renderer" content="webkit">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>游记攻略</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="js/jquery-3.3.1.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="js/bootstrap.min.js"></script>

    <link rel="stylesheet" href="css/header.css">
    <link rel="stylesheet" href="css/jingdian.css">
    <link rel="stylesheet" href="css/common.css">
    <script src="js/include.js"></script><!--导入页头和页脚的js函数-->

    <!-- 浏览器图标 -->
    <link rel="icon" href="img/icon/favicon.ico">

    <style type="text/css">
        #toutiao{
            font-size:10px;
            font-weight:bold;
            font-family:Microsoft YaHei;
            margin-right: 30px;
        }

        #toutiao ul li:hover img{
            transform: scale(1.2); /* 放大1.2倍 */
        }
        #toutiao img{
            float: left;
            height: 110px;
            width:160px;
            margin-right: 20px;
            transition: all 0.6s;
        }
        .huixiao{
            font-size:12px;
            color: #696969;
            font-weight:normal;
        }
        .author{
            float: right;
            font-size:12px;
            color: #696969;
            font-weight:normal;
        }
        #toutiao a{
            text-decoration: none;
            color: black;
        }
        #toutiao a:hover{
            color: #ffa500;
        }

    </style>

    <!--Ajax-->
    <script>
        $(function () {
            load(1,5);
        });

        function load(currentPage,pageSize) {
            $.get("/youji/queryByPage",{currentPage:currentPage,pageSize:pageSize},function (data) {
                //解析pageBean数据并在页面上展示
                // var pageBean=$.parseJSON(data);//解析JSON
                var pageBean=data;
                //1.分页的工具条数据展示
                $("#totalPage").html(pageBean.pages);
                $("#totalCount").html(pageBean.total);

                //1.1 显示分页页码
                var page_lis="";
                var  firstPage='<li onclick="javascript:load(1,5)"><a href="javascript:void(0)">首页</a></li>';
                //计算上一页
                var  beforeNum=currentPage-1;
                if (beforeNum <= 0) {
                    beforeNum=1;
                }
                var beforePage='<li class="threeword"  onclick="javascript:load('+beforeNum+',5)"><a href="javascript:void(0)">上一页</a></li>';
                page_lis+=firstPage;
                page_lis+=beforePage;

                //1.2 最多显示10个页码
                //定义开始位置 begin 结束位置 end
                var begin;
                var end;

                if (pageBean.pages<10){
                    //总页数小于10
                    begin=1;
                    end=pageBean.pages;
                } else {
                    //总页数超过10
                    begin=pageBean.currentPage-5;
                    end=pageBean.currentPage+4;

                    if (begin<1){//开始小于1
                        begin=1;
                        end=begin+9;
                    }

                    if (end > pageBean.pages) {//结束位置大于总页数
                        end=pageBean.pages;
                        begin=end-9;
                    }
                }

                for (var i = begin; i <=end ; i++) {//遍历写入
                    var li;
                    //如果是当前页，加class属性
                    if (pageBean.current==i) {//判断是不是当前页按钮
                        li='<li class="curPage" onclick="javascript:load('+i+','+5+');"><a href="javascript:void(0)">'+i+'</a></li>';
                    } else {
                        li='<li onclick="javascript:load('+i+','+5+');"><a href="javascript:void(0)">'+i+'</a></li>';
                    }
                    page_lis+=li;
                }
                //尾页
                var lastPage='<li onclick="javascript:load('+pageBean.pages+',5)"><a href="javascript:void(0);">末页</a></li>'
                //计算下一页
                var nextNum=currentPage+1;
                if(nextNum>=pageBean.pages){
                    nextNum=pageBean.pages;
                }

                var nextPage='<li class="threeword" onclick="load('+nextNum+',5)"><a href="javascript:void(0);">下一页</a></li>';
                page_lis+=nextPage;
                page_lis+=lastPage;
                $("#pageNum").html(page_lis);


                //展示游记数据
                var lis="";
                $.each(pageBean.records,function (i) {
                    var youji=pageBean.records[i];
                    var li='<li class="list-unstyled">\n' +
                        '                                <a href="#"><img src="'+youji.images[youji.images.length-1].src+'"></a>\n' +
                        '                                <h3>\n' +
                        '                                    <br>\n' +
                        '                                    ​<a href="/detail/youji/'+youji.yid+'">'+youji.title+'</a>\n' +
                        '                                    <p><span class="huixiao">今天 '+youji.time+'</span><span class="author">作者：'+youji.user.nickname+'</span></p>\n' +
                        '                                </h3>\n' +
                        '                            </li>';
                    lis+=li;
                });
                $("#route").html(lis);
            });
        }
    </script>

    <!-- Favicon -->
    <link rel="icon" href="img/icon/favicon.ico">

</head>
<body>
<!--thymeleaf导入页面顶端模板-->
<div th:insert="~{header :: copy}"></div>

<div class="container">
    <div class="page_one">
        <div class="contant">
            <div class="crumbs">
                <img src="img/local.png" alt="">
                <p><a href="/">商丘旅游</a>><span>游记攻略</span></p>
            </div>
            <div class="xinxi clearfix">
                <div class="left">
                    <div class="header">
                        <span>游记攻略</span>
                        <span class="jg">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;...</span>
                    </div>
                    <div id="toutiao">
                        <ul id="route">
                            <li class="list-unstyled">
                                <a href="#"><img src="img/A4.jpg"></a>
                                <h3>
                                    <br>
                                    ​<a href="#">美呆！大雨过后，摄影师...</a>
                                    <p><span class="huixiao">今天 12：00</span><span class="author">作者：chif</span></p>
                                </h3>
                            </li>
                            <li class="list-unstyled">
                                <a href="#"><img src="img/A1.jpg"></a>
                                <h3>
                                    <br>
                                    <a href="#">再游商丘民国小镇</a>
                                    <p><span class="huixiao">今天 12：00</span><span class="author">作者：chif</span></p>
                                </h3>
                            </li>
                            <li class="list-unstyled">
                                <a href="#"><img src="img/A7.jpg"></a>
                                <h3>
                                    <br>
                                    <a href="#">参观商丘抗日烈士纪念馆...</a>
                                    <p><span class="huixiao">今天 12：00</span><span class="author">作者：chif</span></p>
                                </h3>
                            </li>
                            <li class="list-unstyled">
                                <a href="#"><img src="img/A3.jpg"></a>
                                <h3>
                                    <br>
                                    <a href="#">商丘沙田柚王国满树金黄...</a>
                                    <p><span class="huixiao">今天 12：00</span><span class="author">作者：chif</span></p>
                                </h3>
                            </li>
                            <li class="list-unstyled">
                                <a href="#"><img src="img/A2.jpg"></a>
                                <h3>
                                    <br>
                                    <a href="#">绣江夜游流光溢彩</a>
                                    <p><span class="huixiao">今天 12：00</span><span class="author">作者：chif</span></p>
                                </h3>
                            </li>
                            <li class="list-unstyled">
                                <a href="#"><img src="img/A5.jpg"></a>
                                <h3>
                                    <br>
                                    <a href="#">都峤山：揽胜取胜、静心...</a>
                                    <p><span class="huixiao">今天 12：00</span><span class="author">作者：chif</span></p>
                                </h3>
                            </li>
                            <li class="list-unstyled">
                                <a href="#"><img src="img/A6.jpg"></a>
                                <h3>
                                    <br>
                                    <a href="#">游容州古城看四大名楼真...</a>
                                    <p><span class="huixiao">今天 12：00</span><span class="author">作者：chif</span></p>
                                </h3>
                            </li>


                            <li class="list-unstyled"></li>
                        </ul>
                    </div>
                    <div class="page_num_inf">
                        <i></i> 共
                        <span id="totalPage"></span>页<span id="totalCount"></span>条
                    </div>
                    <div class="pageNum">
                        <ul id="pageNum">
                            <li><a href="">首页</a></li>
                            <li class="threeword"><a href="#">上一页</a></li>
                            <li><a href="#">1</a></li>
                            <li><a href="#">2</a></li>
                            <li><a href="#">3</a></li>
                            <li><a href="#">4</a></li>
                            <li><a href="#">5</a></li>
                            <li><a href="#">6</a></li>
                            <li><a href="#">7</a></li>
                            <li><a href="#">8</a></li>
                            <li><a href="#">9</a></li>
                            <li><a href="#">10</a></li>
                            <li class="threeword"><a href="javascript:;">下一页</a></li>
                            <li class="threeword"><a href="javascript:;">末页</a></li>
                        </ul>
                    </div>
                </div>
                <!--酒店推荐-->
                <div class="right">
                    <div class="top">
                        <div class="hot">HOT</div>
                        <span>热门推荐</span>
                    </div>
                    <ul style="padding-left: 0px">
                        <a th:each="jiudianImg:${@img.queryAll(jiudianImage)}" th:href="${jiudianImg.href}">
                            <li>
                                <div class="left"><img th:src="${jiudianImg.src}" class="img-responsive" alt=""></div>
                                <div class="right">
                                    <p th:text="${jiudianImg.title}">商丘汇美酒店...</p>
                                </div>
                            </li>
                        </a>
                    </ul>
                </div>

            </div>
        </div>
    </div>

</div>


<!--thymeleaf导入页脚模板-->
<div th:insert="~{footer :: copy}"></div>
</body>
</html>
